<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—知识库检索"></Header>

    <!-- 搜索栏 -->
    <section class="search_bar">
      <LSelect label="分类" :value="campus" :options="option1" @selected-event="getNewSelected1"></LSelect>
      <LInput label="知识标题" v-model="name" style="margin-left: 16px"></LInput>
      <LInput label="摘要" v-model="zhaiyao" style="margin-left: 16px"></LInput>
      <LInput label="关键词" v-model="guanjianci" style="margin-left: 16px"></LInput>
      <LInput label="内容" v-model="neirong" style="margin-left: 16px"></LInput>
      <LButton label="开始检索" style="margin-left: 16px"></LButton>
      <LButton label="重置条件" style="margin-left: 16px" @click="clearSelected"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData1" style="width: 100%" :default-sort="{ prop: 'f', order: 'descending' }" border>
      <el-table-column prop="a" label="知识标题" sortable />
      <el-table-column prop="b" label="分类" sortable />
      <el-table-column prop="c" label="摘要" sortable />
      <el-table-column prop="d" label="关键词" sortable />
      <el-table-column prop="e" label="附件个数" sortable width="105" />
      <el-table-column prop="f" label="录入时间" sortable width="250" />
      <el-table-column label="操作" width="80">
        <template #default>
          <el-button type="success" size="mini" @click="repairDialog = true">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框：查看 -->
    <div v-dialogdrag>
      <el-dialog v-model="repairDialog" title="查看知识信息" width="40%" @close="repairDialogClose">
        <el-form label-width="80px" :model="repairForm" ref="repairFormRef" :rules="repairFormRules">
          <div class="dialog-border">
            <div class="dialog-border-padding">
              <el-form-item label="标题" prop="a" style="width:100%">
                <el-input v-model="repairForm.a" readonly></el-input>
              </el-form-item>
              <el-form-item label="摘要" prop="b" style="width:100%">
                <el-input v-model="repairForm.b" readonly></el-input>
              </el-form-item>
              <el-form-item label="关键词" prop="c" style="width:100%">
                <el-input v-model="repairForm.c" readonly></el-input>
              </el-form-item>
              <el-form-item label="分类" prop="d" style="width:100%">
                <el-select v-model="repairForm.d" placeholder="请选择" filterable readonly>
                  <el-option label="公共设备1" value="1"></el-option>
                  <el-option label="公共设备2" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型" prop="e" style="width:100%">
                <el-select v-model="repairForm.e" placeholder="请选择" filterable readonly>
                  <el-option label="内部" value="1"></el-option>
                  <el-option label="外部" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="部门" prop="f" style="width:100%">
                <el-select v-model="repairForm.f" placeholder="请选择" multiple filterable readonly>
                  <el-option label="机关事务局1" value="1"></el-option>
                  <el-option label="工程部1" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="知识内容" prop="g" style="width:100%">
                <el-input v-model="repairForm.g" type="textarea" readonly></el-input>
              </el-form-item>
              <el-form-item label="附件" prop="h" style="width:100%">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="6" :on-exceed="handleExceed" :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <span style="font-size:8px"> (最多上传6个文件)</span>
                </el-upload>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" size="mini" @click="repairDialog = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LButton from "../../../components/LButton.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";
import LInput2 from "@/components/LInput2.vue";

export default {
  components: {
    Header,
    LInput,
    LButton,
    LDateTimeSelect2,
    LSelect,
    LInput2,
  },
  data() {
    return {
      name: "",
      campus: "1",
      zhaiyao: "",
      guanjianci: "",
      neirong: "",
      option1: [
        { label: "全部", value: "1" },
        { label: "公共设备", value: "2" },
      ],

      tableData1: [
        {
          a: "风机盘管处理步骤、耗时表2",
          b: "",
          c: "风机盘管处理步骤、耗时表",
          d: "风机盘管处理步骤、耗时表",
          e: "1",
          f: "2017-09-29 16:38:27",
        },
        {
          a: "风机盘管处理步骤、耗时表1",
          b: "",
          c: "风机盘管处理步骤、耗时表",
          d: "风机盘管处理步骤、耗时表",
          e: "1",
          f: "2022-09-29 16:38:27",
        },
      ],
      repairDialog: false,
      repairForm: {},
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //下拉框获取搜索栏“分类” 子传父组件
    getNewSelected1(s) {
      this.campus = s;
    },
    //重置“搜索栏”条件
    clearSelected() {
      this.name = "";
      this.campus = "1";
      this.zhaiyao = "";
      this.guanjianci = "";
      this.neirong = "";
    },
    //清空"查看"弹窗内容
    repairDialogClose() {
      this.$refs.repairFormRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/deep/ .el-dialog .el-select {
  width: 590.8px;
}
</style>